<template>
  <el-carousel v-if="swiperType == 1" height="400px" class="swiper-carousel">
    <el-carousel-item v-for="carousel in carousels" :key="carousel.id">
      <router-link :to="'/goodview/' + carousel.goodId">
        <img class="swiper-img" :src="baseApi + carousel.img" />
      </router-link>
    </el-carousel-item>
  </el-carousel>
  <el-carousel v-else-if="swiperType == 2" type="card" class="swiper-carousel">
    <el-carousel-item v-for="carousel in carousels" :key="carousel.id">
      <router-link :to="'/goodview/' + carousel.goodId">
        <img class="swiper-img1" :src="baseApi + carousel.img" />
      </router-link>
    </el-carousel-item>
  </el-carousel>
  <el-carousel
    v-else-if="swiperType == 3"
    direction="vertical"
    height="400px"
    class="swiper-carousel"
  >
    <el-carousel-item v-for="carousel in carousels" :key="carousel.id">
      <router-link :to="'/goodview/' + carousel.goodId">
        <img class="swiper-img2" :src="baseApi + carousel.img" />
      </router-link>
    </el-carousel-item>
  </el-carousel>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";

const store = useStore();
const route = useRoute();
const router = useRouter();

// Props
const props = defineProps({
  swiperType: {
    type: Number,
    default: 1,
  },
  carousels: {
    type: Array,
    default: () => [],
  },
});

// Data
const baseApi = ref<string>(store.state.baseApi);
const routePath = ref<string>(route.meta.path as string);

// Watchers
watch(
  () => route.meta.path,
  (newPath) => {
    routePath.value = newPath as string;
  }
);
</script>

<style scoped lang="less">
.swiper-carousel {
  border-radius: 20px;
  width: 800px;
  height: 400px;
}
.swiper-img {
  height: 400px;
  width: 800px;
  object-fit: contain;
  background-color: black;
}
.swiper-img1 {
  height: 400px;
  object-fit: contain;
  background-color: black;
}
.swiper-img2 {
  height: 400px;
  width: 800px;
  background-size: 100%;
  background-color: black;
}
</style>
